<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="content">
				<view class="custom-title">模板库</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="flex align-start justify-between">
				<view class="flex align-start justify-start"> 
					<view class="margin-right-32" :class="current==index?'sel':'unsel'" @click="current=index"
					v-for="(info,index) in list" :key="index">{{info}}</view>
				</view>
				<view @click="toSearch">
					<image src="https://txr001.zthj.net/static/img/menu.png" class="img-40"></image>
				</view>
			</view>
			<view class="margin-top-48 flex align-center justify-between flex-wrap">
				<view class="green-content margin-bottom-lg" v-for="(item,index) in 6" :key="index" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/gUpBg.png)'}]">
					<view class="flex align-start justify-between padding-top-32 padding-right-32">
						<text class="green-title">材料行业</text>
						<image src="https://txr001.zthj.net/static/img/tj.png" class="tj-img"></image>
					</view>
					<view class="margin-top-lg">
						<view class=" flex align-center justify-center">
							<view class="template-center">
								<image src="https://txr001.zthj.net/static/img/template.png" class="img-48"></image>
							</view>
						</view>
						<view class="margin-top-16 text-center">
							<view class="text-black text-df">这是一个模板标题</view>
							<view class="text-b2b6b8 text-sm">来源:某某某企业</view>
						</view>
						
					</view>
					<view class="flex bottom-content">
						<view class="flex-sub text-center solid-right">
							<view class="num">20</view>
							<view class="desc">推荐企业</view>
						</view>
						<view class="flex-sub text-center">
							<view class="num">88</view>
							<view class="desc">下载企业</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ["材料","电缆","工业","轮胎","能源","消费","生物"],
				current: 0
			}
		},
		onLoad() {},
		methods: {
			toFillingData() {
				uni.navigateTo({
					url: "/pages/questionnaire/dataFilling"
				})
			},
			toQuestionInfo() {
				uni.navigateTo({
					url: "/pages/questionnaire/questionInfo"
				})
			},
			toSearch(){
				uni.navigateTo({
					url:"/pages/carEvaluate/search"
				})
			}
		}
	}
</script>
<style>
	page {
		background: linear-gradient(180deg, rgba(244, 244, 244, 0) 10%, #F4F4F4 19%);
	}
</style>
<style scoped lang="less">
	.sel{
		font-size: 28rpx;
		font-weight: 600;
		color: #000000;
		padding-bottom: 8rpx;
		border-bottom: 4rpx solid #010101;
	}
	.unsel{
		font-size: 28rpx;
		font-weight: 400;
		color: #000000;
		padding-bottom: 8rpx;
	}
    .green-content{
    	background-size: 100% 100%;
    	width: 328rpx;
    	height: 506rpx;
    	// padding: 32rpx;
    	.green-title{
			padding-left: 32rpx;
    		font-size: 24rpx;
    		font-weight: 600;
    		color: #010101;
    	}
    	.tj-img{
    		width: 32rpx;
    		height: 64rpx;
    		margin-top:-32rpx;
    		margin-left: 30rpx;
    	}
		.template-center{
			width: 136rpx;
			height: 160rpx;
			background: #ECECEC;
			border-radius: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
    	.g-file{
    		margin-top: 40rpx;
    		width: 156rpx;
    		height: 160rpx;
    	}
    	.bottom-content{
    		background-color: #FFFFFF;
    		border-radius: 0 0 48rpx 48rpx;
    		margin-top: 40rpx;
    		padding: 20rpx 0;
    		.num{
    			font-size: 40rpx;
    			font-weight: 400;
    			color: #010101;
    		}
    		.desc{
    			font-size: 24rpx;
    			font-weight: 400;
    			color: #B2B6B8;
    		}
    	}
    }
</style>